/* pages/health/ai-calorie/ai-calorie.wxss */
.ai-calorie-container {
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  color: #fff;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx 10rpx;
  font-size: 24rpx;
  color: #fff;
}

.status-right {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: rgba(0, 0, 0, 0.8);
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-arrow {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.nav-right {
  width: 60rpx;
}

/* 说明文字 */
.instruction {
  padding: 20rpx 30rpx;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
}

.instruction text {
  font-size: 28rpx;
  color: #fff;
  opacity: 0.8;
}

/* 相机预览区域 */
.camera-preview {
  flex: 1;
  position: relative;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-frame {
  width: 600rpx;
  height: 400rpx;
  border: 2rpx dashed #fff;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 食物识别模式 - 圆形扫描框 */
.food-frame {
  border-radius: 50%;
  width: 400rpx;
  height: 400rpx;
}

/* 条形码扫描模式 - 矩形扫描框 */
.barcode-frame {
  border-radius: 8rpx;
  width: 500rpx;
  height: 200rpx;
}

/* 配料表模式 - 方形扫描框 */
.ingredient-frame {
  border-radius: 12rpx;
  width: 450rpx;
  height: 300rpx;
}

.scan-line {
  width: 100%;
  height: 2rpx;
  background: #fff;
  animation: scan 2s linear infinite;
}

/* 条形码扫描线 - 垂直移动 */
.barcode-line {
  width: 2rpx;
  height: 100%;
  animation: barcode-scan 1.5s linear infinite;
}

/* 配料表扫描线 - 水平移动 */
.ingredient-line {
  width: 100%;
  height: 2rpx;
  animation: ingredient-scan 2.5s linear infinite;
}

@keyframes scan {
  0% {
    transform: translateY(-200rpx);
  }
  100% {
    transform: translateY(200rpx);
  }
}

@keyframes barcode-scan {
  0% {
    transform: translateX(-250rpx);
  }
  100% {
    transform: translateX(250rpx);
  }
}

@keyframes ingredient-scan {
  0% {
    transform: translateY(-150rpx);
  }
  100% {
    transform: translateY(150rpx);
  }
}

/* 底部操作栏 */
.bottom-actions {
  background: rgba(0, 0, 0, 0.9);
  padding: 30rpx;
}

.function-buttons {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.function-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.function-btn.active {
  background: rgba(255, 255, 255, 0.2);
}

.function-icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}

.function-label {
  font-size: 24rpx;
  color: #fff;
  text-align: center;
}

/* 拍照按钮区域 */
.capture-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40rpx;
}

.gallery-btn, .history-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
}

.gallery-icon, .history-icon {
  font-size: 32rpx;
  color: #fff;
}

.capture-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #00ff88);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30rpx rgba(0, 212, 255, 0.5);
  position: relative;
}

.capture-inner {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

/* 条形码扫描模式 */
.barcode-mode .instruction text {
  content: "支持包装食品、GLP-1药品的条形码扫描";
}

/* 配料表模式 */
.ingredient-mode .instruction text {
  content: "拍包装食品上的配料表,解读是否健康";
}
